<template>
    <div class="pool">
        <el-button @click="saveHandel">保存</el-button>
        <br>
        <table>
            <tr class="first">
                <td
                    :rowspan="title1.TALNINEPALACESET_XAXISNUM"
                    style="width:1%;"
                >{{ title1.TALNINEPALACESET_XAXISNAME }}</td>
                <td
                    :rowspan="title1.TALNINEPALACESET_XAXISNUM"
                    style="width:1%;"
                >{{ title1.TALNINEPALACESET_XAXISNAME }}维度</td>
                <template v-for="(item2, xp) in xarr" >
                    <td :key="xp" :style="'width:'+98/title1.TALNINEPALACESET_XAXISNUM+'%;'">
                        <div
                            v-for="(item, index2) in title"
                            v-if="item.TALNINEPALACETAB_XAXIS==''+(xp+1) && item.TALNINEPALACETAB_YAXIS=='1'"
                            :key="index2">
                            <span
                                class="title"
                                :max="item.TALNINEPALACETAB_GRIDNUMUP"
                                :style="'background-color:'+item.TALNINEPALACETAB_TITLECOLOUR"
                            >{{ item.TALNINEPALACETAB_TITLENAME }}({{ users[xp][0].length }}/{{ item.TALNINEPALACETAB_GRIDNUMUP }})</span>

                            <draggable
                                :style="'background-color:'+item.TALNINEPALACETAB_GRIDCOLOUR"
                                v-model="users[xp][0]"
                                class="cnt"
                                element="div"
                                :options="dragOptions1"
                                @start="startHandel"
                                @end="endHandel"
                            >
                                <div class="rect" v-for="(item, index3) in users[xp][0]" :key="index3">{{ item.TALVNINEPALACE_EMPNAME }}</div>
                            </draggable>
                        </div>
                    </td>
                </template>
            </tr>
            <template v-for="(item, yp) in yarr">
                <template v-if="yp>0 && yp<yarr.length">
                    <tr :key="yp">
                        <td v-for="(item, xp) in xarr" :key="xp">
                            <div
                                v-for="(item, index4) in title"
                                :key="index4"
                                v-if="item.TALNINEPALACETAB_XAXIS==''+(xp+1) && item.TALNINEPALACETAB_YAXIS==''+(yp+1) && item.TALNINEPALACETAB_GRIDNUMUP"
                            >
                                <span
                                    class="title"
                                    :max="item.TALNINEPALACETAB_GRIDNUMUP"
                                    :style="'background-color:'+item.TALNINEPALACETAB_TITLECOLOUR"
                                >{{ item.TALNINEPALACETAB_TITLENAME }}({{ users[xp][yp].length }}/{{ item.TALNINEPALACETAB_GRIDNUMUP }})</span>

                                <draggable
                                    class="cnt"
                                    :style="'background-color:'+item.TALNINEPALACETAB_GRIDCOLOUR"
                                    element="div"
                                    v-model="users[xp][yp]"
                                    :options="dragOptions1"
                                    @start="startHandel"
                                    @end="endHandel"
                                    @update="updateHandel"
                                >
                                    <div
                                        class="rect"
                                        v-for="(item, index5) in users[xp][yp]"
                                        :key="index5"
                                    >{{ item.TALVNINEPALACE_EMPNAME }}</div>
                                </draggable>
                            </div>
                        </td>
                    </tr>
                </template>
            </template>

            <tr>
                <td :colspan="title1.TALNINEPALACESET_XAXISNUM+2">{{ title1.TALNINEPALACESET_YAXISNAME }}维度</td>
            </tr>
            <tr>
                <td :colspan="title1.TALNINEPALACESET_XAXISNUM+2">{{ title1.TALNINEPALACESET_YAXISNAME }}</td>
            </tr>
        </table>
        <div style="float:right;margin-right: 15px;">
            拖动人员：
            <br>
        </div>
        <draggable
            class="myList"
            id="list"
            element="div"
            v-model="myList"
            :options="dragOptions"
            @start="startHandel"
            @end="endHandel"
        >
            <div
                class="rect"
                v-for="(item, index) in myList"
                :key="index"
                style="margin: 5px 0px;"
            >{{ item.TALSQUAREDPAPER_CNAME }}</div>
        </draggable>

        <br>
    </div>
</template>
<script>
import draggable from 'vuedraggable'
import axios from 'axios'

/**
     *  獲取數據
     **/
function getData(http, path, par, callBack) {
    axios.post(path, par, {
        emulateJSON: true
    }).then(
        (res) => {
            console.log(res)
            callBack(res.data.rows)
        }
    )
}
export default {
    name: 'dragNineCard',
    components: {
        draggable
    },

    data() {
        return {
            users: [],
            title1: {},
            title: [],
            xarr: [],
            yarr: [],
            myList: []

        }
    },
    computed: {
        dragOptions1() {
            return {
                animation: 0,
                group: {
                    name: 'description',
                    pull: true,
                    put: function() {
                        var max = event.currentTarget.parentElement.getElementsByClassName('title')[0].getAttribute('max')
                        var added = event.currentTarget.childElementCount
                        if (added >= max) {
                            return false
                        }
                        return true
                    }
                },
                ghostClass: 'ghost'
            }
        },
        dragOptions() {
            return {
                animation: 0,
                group: {
                    name: 'description',
                    pull: true,
                    put: true
                },
                ghostClass: 'ghost'
            }
        }
    },
    created() {
        // 初始化数据，这里做赋值
        var params = {
            'order': 'asc',
            'offset': 0,
            'limit': 213,
            'containerParam': {},
            'paramsMap': {},
            'requestParam': {},
            'sortParams': {},
            'filter': {},
            'userIds': null,
            'formId': '6294',
            'isView': null,
            'heightGrade': []
        }
        // 获取人员

        // 获取表格总标题
        var pa = {
            'order': 'asc',
            'offset': 0,
            'limit': 213,
            'containerParam': {},
            'paramsMap': {},
            'requestParam': {},
            'sortParams': {},
            'filter': {},
            'userIds': null,
            'formId': '6169',
            'isView': null,
            'heightGrade': []
        }
        var par = {
            'order': 'asc',
            'offset': 0,
            'limit': 213,
            'containerParam': {},
            'paramsMap': {},
            'requestParam': {},
            'sortParams': {},
            'filter': {},
            'userIds': null,
            'formId': '6196',
            'isView': null,
            'heightGrade': []
        }
        // 获取表格标题

        var path = '/myehr/form/cardformInitData.action'
        var titles
        var title
        var user
        var http = this.$http
        var appData = this.$data
        getData(http, path, par, function(data) {
            titles = data
            getData(http, path, pa, function(data) {
                title = data
                getData(http, path, params, function(data) {
                    user = data

                    // 人員分組
                    var arr = []// 分組后數組
                    var row = title[0].TALNINEPALACESET_XAXISNUM// 縂行數
                    var col = title[0].TALNINEPALACESET_YAXISNUM// 縂列數
                    var users = user// 所有人員列表
                    var myList = []// 待定人員

                    for (var x = 0; x < row; x++) {
                        var xarr = []
                        for (var y = 0; y < col; y++) {
                            var li = []
                            for (var u = 0; u < users.length; u++) {
                                var item = users[u]
                                if (item.TALVNINEPALACE_ASSESSJOB == '0' && item.TALVNINEPALACE_PERFORMANCE == '0') {
                                    myList.push(item)
                                }

                                if (item.TALVNINEPALACE_ASSESSJOB == '' + (x + 1) && item.TALVNINEPALACE_PERFORMANCE == '' + (y + 1)) {
                                    li.push(item)
                                }
                            }
                            xarr.push(li)
                        }
                        arr.push(xarr)
                    }

                    var xArr = []
                    var yArr = []
                    for (var i = 0; i < row; i++) {
                        xArr.push('')
                    }
                    for (var j = 0; j < col; j++) {
                        yArr.push('')
                    }

                    appData.xarr = xArr
                    appData.yarr = yArr
                    appData.users = arr
                    appData.title = titles
                    appData.title1 = title[0]
                    appData.myList = myList
                })
            })
        })
    },
    methods: {
        endHandel() {
            //  debugger;
        },
        startHandel() {
            // debugger;
        },
        updateHandel(evt) {
            evt.preventDefault()
            console.log('拖动前的索引 :' + evt.oldIndex)
            console.log('拖动后的索引 :' + evt.newIndex)
        },
        // 保存数据
        saveHandel() {
            var arrs = this.$data.users
            var saveArrs = []
            for (var x = 0; x < arrs.length; x++) {
                for (var y = 0; y < arrs[x].length; y++) {
                    var group = arrs[x][y]
                    for (var g = 0; g < group.length; g++) {
                        var item = group[g]
                        item.TALVNINEPALACE_ASSESSJOB = (x + 1) + ''
                        item.TALVNINEPALACE_PERFORMANCE = (y + 1) + ''
                        saveArrs.push(item)
                    }
                }
            }
            console.log(saveArrs)
        }

    }
}
</script>
